<template>
  <el-form :label-position="labelPosition" label-width="80px">
    <el-form-item label="预设名称" class="strategyName" @focus="">
      <el-input v-model="strategyInfo.strategyName" @change="handleChange"></el-input>
    </el-form-item>
    <div class="titleBoundary">
      <div class="title">时间设置</div>
      <div class="manageTime">
        <template>
          <el-radio v-model="radio" label="1" @change="changeRadio">指定时间段</el-radio>
          <el-radio v-model="radio" label="2" @change="changeRadio">全天执行</el-radio>
        </template>
        <el-form-item label="星期选择:" class="selectWeeks">
          <template>
            <!--              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
              <el-checkbox-group v-model="strategyInfo.week" @change="checkedWeeks">
                <el-checkbox v-for="week in weeks" :label="week">{{week}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
        <el-form-item label="开始时间">
          <template>
            <el-input-number v-model="strategyInfo.startTimeHour" :precision="0" :disabled="timeSlot"
                             controls-position="right" @change="handleChange" size="mini" :min="0"
                             :max="23"></el-input-number>
            <span class="word">时</span>
            <el-input-number v-model="strategyInfo.startTimeMin" :precision="0" :disabled="timeSlot"
                             controls-position="right" @change="handleChange" size="mini" :min="0"
                             :max="59"></el-input-number>
            <span class="word">分</span>
          </template>
        </el-form-item>
        <el-form-item label="结束时间">
          <template>
            <el-input-number v-model="strategyInfo.endTimeHour" :precision="0" :disabled="timeSlot"
                             controls-position="right" @change="handleChange" size="mini" :min="0"
                             :max="23"></el-input-number>
            <span class="word">时</span>
            <el-input-number v-model="strategyInfo.endTimeMin" :precision="0" :disabled="timeSlot"
                             controls-position="right" @change="handleChange" size="mini" :min="0"
                             :max="59"></el-input-number>
            <span class="word">分</span>
          </template>
        </el-form-item>
      </div>
    </div>
    <div class="titleBoundary">
      <div class="title">设置</div>
      <div class="manageTemp">
          <el-form-item label="选择:" style="margin-bottom: 0px">
            <template>
                <el-checkbox v-model="strategyInfo.minPeople" :true-label = "1" >有人</el-checkbox>
                <el-checkbox v-model="strategyInfo.maxPeople" :true-label = "0" @change="closePeopleNum">无人</el-checkbox>
            </template>
          </el-form-item>

          <div>最多人数:
            <el-input-number v-model="strategyInfo.maxPeople" :precision="0" :disabled="peopleNumSwitch"
                             controls-position="right" @change="handleChange" size="mini" :min="0"
                             :max="23"></el-input-number>
            <span class="word">人</span>
          </div>

          <div>操作:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <template>
              <el-radio v-model="strategyInfo.switch" :label="1" >送电</el-radio>
              <el-radio v-model="strategyInfo.switch" :label="0" >断电</el-radio>
            </template>
          </div>
        </div>
      </div>
  </el-form>
</template>

<script>
  export default {
    props: {
      id: Number,
      modifyInfo: Object
    },
    data () {
      return {
        labelPosition: 'left',
        radio: '1',
        strategyInfo: {
          strategyName: '',
          week:[],
          weekNum: '',
          startTimeHour: 0,
          startTimeMin: 0,
          endTimeHour: 0,
          endTimeMin: 0,
          minPeople: 1,
          maxPeople: 10,
          switch: 1,
        },
        people:0,
        timeSlot: false,
        peopleNumSwitch: false,
        // 全选
        weeks: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      }
    },
    methods: {
      closePeopleNum(){
        // this.peopleNumSwitch = !this.peopleNumSwitch
      },
      changeRadio () {
        if (this.radio === '2') {
          this.timeSlot = true
          this.strategyInfo.startTimeHour = 0
          this.strategyInfo.startTimeMin = 0
          this.strategyInfo.endTimeHour = 23
          this.strategyInfo.endTimeMin = 59
        } else {
          this.timeSlot = false
        }
        this.$emit('getNewData', this.strategyInfo)
      },

      // 获取策略执行天数
      checkedWeeks (value) {
        this.strategyInfo.weekNum = ''
        for (let i = 0; i < value.length; i++) {
          switch (this.strategyInfo.week[i]) {
            case '星期一':
              this.strategyInfo.weekNum += 1
              break
            case '星期二':
              this.strategyInfo.weekNum += 2
              break
            case '星期三':
              this.strategyInfo.weekNum += 3
              break
            case '星期四':
              this.strategyInfo.weekNum += 4
              break
            case '星期五':
              this.strategyInfo.weekNum += 5
              break
            case '星期六':
              this.strategyInfo.weekNum += 6
              break
            case '星期日':
              this.strategyInfo.weekNum += 0
              break
          }

        }
        this.$emit('getNewData', this.strategyInfo)
      },

      handleChange () {
        this.$emit('getNewData', this.strategyInfo)
      },

      clearData () {
        this.radio = '1'
        this.timeSlot = false
        this.strategyInfo = {
          strategyName: '',
          chooseWeeds: [],
          week: [],
          startTimeHour: 0,
          startTimeMin: 0,
          endTimeHour: 0,
          endTimeMin: 0,
          minPeople: 1,
          maxPeople: 0,
          switch: 0,
        }
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  @import "../../../../assets/strategyInfo.css";
</style>
